<!--
 * @Author: hq
 * @Date: 2022-07-19 11:11:42
 * @LastEditors: hq
 * @LastEditTime: 2022-08-18 09:58:57
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="info" v-loading="loading">
    <el-form
      v-model="detailData"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="酒店名">
            <el-input v-model="detailData.name"></el-input>
          </el-form-item>
          <el-form-item label="酒店星级" v-if="detailData.base">
            <el-rate v-model="detailData.base.level"></el-rate>
            <!-- <el-input v-model="detailData.base.level"></el-input> -->
          </el-form-item>
          <el-form-item label="开业时间" v-if="detailData.base">
            <el-date-picker
              v-model="detailData.base.open"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <!-- <el-input v-model="detailData.base.open"></el-input> -->
          </el-form-item>
          <el-form-item label="装修时间" v-if="detailData.base">
            <el-date-picker
              v-model="detailData.base.renovation"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <!-- <el-input v-model="detailData.base.renovation"></el-input> -->
          </el-form-item>
          <el-form-item label="房间数" v-if="detailData.base">
            <el-input v-model="detailData.base.rooms"></el-input>
          </el-form-item>
          <el-form-item label="酒店电话" v-if="detailData.base">
            <el-input v-model="detailData.base.tel"></el-input>
          </el-form-item>
          <el-form-item label="位置">
            <div class="position">
              <el-input readonly v-model="detailData.location2"></el-input>
              <div class="search hand_cs" @click="handleMap">点击搜索</div>
            </div>
          </el-form-item>

          <!-- <el-form-item label="状态">
            <el-switch
              active-text="禁用"
              inactive-text="启用"
              :active-value="1"
              :inactive-value="0"
              class="tablescope"
              v-model="detailData.status"
            >
            </el-switch>
          </el-form-item> -->
          <el-form-item label="酒店首图">
            <el-upload
              v-loading="loading1"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="upLoadServe"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="酒店轮播图">
            <el-upload
              v-loading="loading2"
              action=""
              list-type="picture-card"
              :http-request="upLoadServe1"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :limit="10"
            >
              <div>
                <i class="el-icon-plus"></i>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible" class="detailDialog">
              <img width="100%" :src="bannerImg" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="订房须知">
            <div class="purchase">
              <div
                class="purchase_con"
                v-for="(item, index) in detailData.booking_notice"
                :key="index"
              >
                <div class="l">
                  <div class="flex">
                    <div>标题：</div>
                    <el-input v-model="item.title"></el-input>
                  </div>
                  <div class="flex">
                    <div>内容：</div>
                    <el-input v-model="item.desc" type="textarea"></el-input>
                  </div>
                </div>
                <div v-if="index === 0" @click="handleAddRoom">
                  <i class="el-icon-plus hand_cs"></i>
                </div>
                <div>
                  <i
                    v-if="index != 0"
                    @click="handleDelRoom(index)"
                    class="el-icon-delete hand_cs"
                  ></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="退订政策">
            <div class="purchase">
              <div
                class="purchase_con"
                v-for="(item, index) in detailData.refund_tips"
                :key="index"
              >
                <div class="l">
                  <div class="flex">
                    <div>标题：</div>
                    <el-input v-model="item.title"></el-input>
                  </div>
                  <div class="flex">
                    <div>内容：</div>
                    <el-input v-model="item.desc" type="textarea"></el-input>
                  </div>
                </div>
                <div v-if="index === 0" @click="handleAddrefund">
                  <i class="el-icon-plus hand_cs"></i>
                </div>
                <div>
                  <i
                    v-if="index != 0"
                    @click="handleDelrefund(index)"
                    class="el-icon-delete hand_cs"
                  ></i>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      class="detailDialog"
      title="选择地理位置"
      :visible.sync="mapDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="900px"
    >
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <Map v-if="mapDialog" @updateLocation="updateLocation"></Map>
    </el-dialog>
  </div>
</template>

<script>
import Map from "@/components/map.vue";
import { hotelDetail, editHotel } from "@/api/shopSystem";
import { getGeoAddress } from "@/api/merchant";
import upImg from "@/utils/upimg";
export default {
  components: { Map },
  props: ["rowData"],
  data() {
    return {
      loading: false,
      loading1: false,
      loading2: false,
      detailData: {}, //酒店名字
      imageUrl: "",
      bannerImg: "",
      fileList: [],
      fileListId: [],
      fileListArr: [],
      dialogVisible: false, //轮播图浏览
      imagesArr: [],
      rowId: "",
      mapDialog: false,
      status: null,
      addDialog: false, //新增酒店
    };
  },
  methods: {
    async hotelDetail() {
      const { data, err } = await hotelDetail({
        hid: this.rowData.id,
      });
      if (err === 0) {
        this.loading = false;
        this.detailData = data;
        this.imageUrl = data.thumb;
        //轮播图
        data.images.forEach((item) => {
          item.url = item.src;
        });
        this.fileList = data.images; //轮播图
        this.rowId = data.id;
      }
    },
    //编辑酒店接口
    async editHotel() {
      console.log(this.detailData.base);
      const { err, msg } = await editHotel({
        hid: this.rowData.id,
        name: this.detailData.name,
        thumb: this.imageUrl, //首图
        images: this.fileListArr.join(","), //轮播图
        base: this.detailData.base,
        location2: this.detailData.location2,
        lng: this.detailData.lng,
        lat: this.detailData.lat,
        province: this.detailData.province,
        booking_notice: this.detailData.booking_notice,
        refund_tips: this.detailData.refund_tips,
      });
      if (err === 0) {
        this.$message({
          showClose: true,
          message: "编辑成功！",
          type: "success",
        });
        this.$emit("handleClose");
      } else {
        this.$message({
          showClose: true,
          message: msg,
          type: "error",
        });
      }
    },
    async getGeoAddress() {
      const { data, err } = await getGeoAddress({
        lng: this.detailData.lng,
        lat: this.detailData.lat,
      });
      if (err === 0) {
        this.detailData.province = data.ad_code;
      }
    },
    //商品首图
    upLoadServe(file) {
      this.loading1 = true;
      upImg.upimg(
        (data) => {
          console.log(data.data.url);
          this.imageUrl = data.data.url;
          this.loading1 = false;
        },
        1,
        file
      );
    },
    //轮播图
    //上传图片轮播图
    upLoadServe1(file) {
      this.loading2 = true;
      upImg.upimg(
        (data) => {
          //state判断是首图还是轮播图
          this.fileListId.push({ id: data.data.url, name: file.file.name });
          this.fileListArr = this.fileListId.map((item) => {
            return item.id;
          });
          this.loading2 = false;
        },
        1,
        file
      );
    },
    //商品轮播图
    handlePictureCardPreview(file) {
      this.bannerImg = file.url;
      this.dialogVisible = true;
    },
    //删除商品图
    handleRemove(file, fileList) {
      file;
      fileList;
      //原来的图片
      this.fileList = fileList;
      //添加的图片
      this.fileListId.forEach((item, index) => {
        if (file.name === item.name) {
          this.fileListId.splice(index, 1);
        }
      });
      this.fileListArr = this.fileListId.map((item) => {
        return item.id;
      });
    },
    //新增订房须知
    handleAddRoom() {
      this.detailData.booking_notice.push({ title: "", desc: "" });
    },
    //删除订房须知
    handleDelRoom(index) {
      this.detailData.booking_notice.splice(index, 1);
    },
    //新增退订政策
    handleAddrefund() {
      this.detailData.refund_tips.push({ title: "", desc: "" });
    },
    //删除退定政策
    handleDelrefund(index) {
      this.detailData.refund_tips.splice(index, 1);
    },
    //点击搜索地图
    handleMap() {
      this.mapDialog = true;
    },
    updateLocation(Addr) {
      console.log(Addr);
      this.detailData.lat = Addr.lat;
      this.detailData.lng = Addr.lon;
      this.detailData.location2 = Addr.orgAddr;
      this.getGeoAddress(); //获取省市区
    },
    //地图选择
    handleAdd() {
      this.mapDialog = false;
    },
    //提交
    handleSubmit() {
      if (this.fileList) {
        //如果有旧图片
        this.fileList.forEach((item) => {
          this.fileListArr.push(item.at_id);
        });
      }
      this.editHotel();
    },
    //创建酒店
    handleCreate() {
      this.addDialog = true;
    },
    handleCloseAdd() {
      this.addDialog = false;
      this.hotelDetail();
    },
  },
  created() {
    this.hotelDetail();
  },
};
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
.zwsj {
  span {
    color: #147fea;
  }
}
.info {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    margin-bottom: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .col {
    display: flex;
    align-items: center;
    width: 25%;
    div {
      flex-shrink: 0;
    }
  }
  .mb15 {
    margin-bottom: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .banner_col {
    width: auto;
    .banner {
      display: flex;
      .list {
        margin-right: 20px;
      }
    }
  }
  .row {
    display: flex;
    align-items: center;
    .facs_list {
      display: flex;
      align-items: center;
      img {
        margin-left: 10px;
        margin-right: 30px;
        width: 14px;
        height: 14px;
      }
    }
  }
}
.green {
  color: green;
}
.red {
  color: red;
}
.blue {
  color: $color-primary1;
  font-weight: 400;
}
.detailDialog {
  /deep/.el-dialog {
    height: 82%;
    margin-top: 10vh !important;
    .el-dialog__body {
      height: 80%;
      overflow: auto;
    }
  }
}
.look {
  margin-left: 10px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pb20 {
  padding-bottom: 20px;
  box-sizing: border-box;
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploader {
  width: 82px;
  height: 82px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
/deep/.el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
/deep/.el-upload-list__item {
  width: 80px !important;
  height: 80px !important;
  border: 0 !important;
}
.purchase {
  padding-top: 50px;
  box-sizing: border-box;
  .purchase_con {
    display: flex;
    align-items: center;
    font-size: 13px;
    .l {
      width: 95%;
      .flex {
        // width: 400px;
        display: flex;
        align-items: center;
        .el-input,
        .el-textarea {
          width: 85%;
        }
        div {
          flex-shrink: 0;
          margin-bottom: 20px;
        }
      }
    }
    i {
      font-size: 30px;
      flex-shrink: 0;
    }
  }
}
.map {
  padding-left: 20px;
  box-sizing: border-box;
  height: 800px;
}
.position {
  position: relative;
  .search {
    position: absolute;
    top: 2px;
    right: -100px;
    color: #147fea;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    color: #606266;
    font-size: 13px;
  }
}
.el-rate {
  height: 40px;
  line-height: 52px;
}
</style>
